<template>
  <div style="width: 100%" class="page-box">
    <el-tree :data="data" :props="defaultProps">
      <div slot-scope="{ node, data }" class="nodeContent">
        <!-- <span class="nodeLabel">{{ node.label }} </span> -->
        <span class="nodeLabel"> {{ data.nameCn }}</span>
        <el-button v-if="data.oid !== rowData.oid" type="text" class="nodeOperate" @click="changePage(data)">切换</el-button>
      </div>
    </el-tree>
  </div>
</template>

<script>

export default {
  name: "page-box",
  data() {
    return {
      data: [],
      defaultProps: {
        children: "children",
        label: "nameCn",
      },
    };
  },
  props: {
    /* 当前列数据 */
    rowData: {
      type: Object,
      default: {},
    },
    reloadPage: {
      type: Function,
      default: ()=>{},
    },
  },
  methods: {
    changePage(data){
      this.reloadPage({
        ...data,
        allList: this.rowData.allList
      })
    },
    onNodeTreeClick(nodeData, node, nodeEl) {
      console.log("nodeData", nodeData);
    },
  },
  mounted() {
    this.data = [this.rowData.allList] || [];
  },
};
</script>
<style lang="scss" scoped>
.page-box {
  box-sizing: border-box;
  padding: 20px 20px 10px 10px;
}
.body_ {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.nodeContent{
  display: flex;
  align-items: center;
  .nodeLabel{
    font-size: 14px;
  }
  .nodeOperate{
    margin-left: 10px;
    display: none;
  }
  &:hover{
    .nodeOperate{
      display: block;
    }
  }
}
</style>